<template>
  <div v-loading="loading" :style="isEdit?'':{padding: '0'}" class="upload-file-container">
    <ImportButton v-if="isEdit" :is-disabled="disabled" :accept="''" :hide-confirm="true" :import-api="importApi" is-diy @upProgress="upProgress" @complateSetData="onSuccess">
      <el-tooltip v-if="value && value.url && value.name" :open-delay="800" placement="top">
        <div slot="content" style="max-width:200px;">
          <p class="content-text pointer" @click="downloadFile(value.url, value.name)">文件名：{{ value.name }}</p>
          <p v-if="value.time" class="content-text">上传时间：{{ value.time | format('YYYY-MM-DD HH:mm:ss') }}</p>
        </div>
        <div class="upload-btn">
          <span class="text">{{ value.name }}</span>
          <i v-if="value.url && value.name && !disabled" class="el-icon-circle-close" @click="removeFile"/>
        </div>
      </el-tooltip>
      <div v-else class="upload-btn">
        <span v-if="isRequired" style="color:red;">*</span>
        <span :class="{'disabled-text': disabled}" class="text">点击上传</span>
        <el-tooltip v-if="toolTip" placement="top">
          <div slot="content" style="max-width:200px;">{{ toolTip }}</div>
          <tipIcon is-diy style="color:#666;line-height: 23px;margin-top: -1px;margin-left: 3px;" />
        </el-tooltip>
        <i v-if="showUploadIcon" class="upload-icon"/>
      </div>
    </ImportButton>
    <el-tooltip v-else-if="value && value.name && value.url" :open-delay="800" placement="top">
      <div slot="content" style="max-width:200px;">
        <p class="content-text pointer" @click="downloadFile(value.url, value.name)">文件名：{{ value.name }}</p>
        <p v-if="value.time" class="content-text">上传时间：{{ value.time | format('YYYY-MM-DD HH:mm:ss') }}</p>
      </div>
      <div class="upload-btn" @click="downloadFile(value.url, value.name)">
        <span class="text">{{ value.name || '--' }}</span>
      </div>
    </el-tooltip>
    <div v-else>--</div>
  </div>
</template>

<script>
import ImportButton from '@/components/ImportButton';
import { downloadFile } from '@/utils';
import { format } from '@/filters/date';

export default {
  components: { ImportButton },
  filters: { format },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: true
    },
    importApi: {
      type: String,
      default: '/admin/contract/file/upload'
    },
    toolTip: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isRequired: {
      type: Boolean | String,
      default: false
    },
    showUploadIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    upProgress() {
      this.loading = true;
    },
    onSuccess(val) {
      const obj = {
        name: val.data.name,
        url: val.data.url,
        time: val.data.time
      };
      this.loading = false;
      this.$emit('changeValue', obj);
    },
    removeFile(e) {
      e.stopPropagation();
      // this.$emit('changeValue', {});
      this.$emit('changeValue', null);
    },
    downloadFile(url, name) {
      const img = /(\.(gif|png|jpg|jpeg|webp|bmp|tif|pdf))$/i;
      if (img.test(name)) {
        window.open(url);
      } else {
        downloadFile(url, name);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.upload-file-container {
  position: relative;
  width: 100%;
  padding: 0 10px;
  .el-icon-circle-close {
    // position: absolute;
    color: #666;
    // top: 0;
    // right: 0;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 3;
    top: 5px;
    display: none;
  }
  &::v-deep {
    .el-upload {
      & > div {
        display: flex;
      }
    }
  }
  .pointer {
    cursor: pointer;
    &:hover {
      color: #406eff !important;
    }
  }
}

.upload-btn {
  color: #406eff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: flex;
  align-items: center;
  .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .upload-icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background-size: contain;
    background-image: url('~@/assets/icon-upload-blue.png');
    background-repeat: no-repeat;
  }
  &:hover {
    .el-icon-circle-close {
      display: block;
    }
  }
}
.disabled-text {
  color: #C0C4CC;
}
.content-text {
  padding: 0;
  margin: 0;
}
</style>
